<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example: Portal Style Example</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
    <link rel="stylesheet" href="../assets/css/main.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <script src="../../build/yui/yui-min.js"></script>
</head>
<body>

<div id="doc">
    <h1>Example: Portal Style Example</h1>

    

    <div class="yui3-g">
        <div id="main" class="yui3-u">
            <div class="content"><div class="intro">
<p>This is a portal style example using Drag & Drop event bubbling and animation.</p>
</div>

<div class="example newwindow">
    <a href="portal-example.html" target="_blank" class="button">
        View Example in New Window
    </a>
</div>

<h2>Full example source</h2>

<pre class="code prettyprint">&#x2F;&#x2F;Use loader to grab the modules needed
YUI().use(&#x27;dd&#x27;, &#x27;anim&#x27;, &#x27;yql&#x27;, &#x27;cookie&#x27;, &#x27;json&#x27;, function(Y) {
    &#x2F;&#x2F;Make this an Event Target so we can bubble to it
    var Portal = function() {
        Portal.superclass.constructor.apply(this, arguments);
    };
    Portal.NAME = &#x27;portal&#x27;;
    Y.extend(Portal, Y.Base);
    &#x2F;&#x2F;This is our new bubble target..
    Y.Portal = new Portal();


    &#x2F;&#x2F;Setup some private variables..
    var goingUp = false, lastY = 0, trans = {};

    &#x2F;&#x2F;The list of feeds that we are going to use
    var feeds = {
        &#x27;ynews&#x27;: {
            id: &#x27;ynews&#x27;,
            title: &#x27;Yahoo! US News&#x27;,
            url: &#x27;rss.news.yahoo.com&#x2F;rss&#x2F;us&#x27;
        },
        &#x27;yui&#x27;: {
            id: &#x27;yui&#x27;,
            title: &#x27;YUI Blog&#x27;,
            url: &#x27;feeds.yuiblog.com&#x2F;YahooUserInterfaceBlog&#x27;
        },
        &#x27;slashdot&#x27;: {
            id: &#x27;slashdot&#x27;,
            title: &#x27;Slashdot&#x27;,
            url: &#x27;rss.slashdot.org&#x2F;Slashdot&#x2F;slashdot&#x27;
        },
        &#x27;ajaxian&#x27;: {
            id: &#x27;ajaxian&#x27;,
            title: &#x27;Ajaxian&#x27;,
            url: &#x27;feeds.feedburner.com&#x2F;ajaxian&#x27;
        },
        &#x27;daringfireball&#x27;: {
            id: &#x27;daringfireball&#x27;,
            title: &#x27;Daring Fireball&#x27;,
            url: &#x27;daringfireball.net&#x2F;index.xml&#x27;
        },
        &#x27;wiredtech&#x27;: {
            id: &#x27;wiredtech&#x27;,
            title: &#x27;Wire: Tech Biz&#x27;,
            url: &#x27;www.wired.com&#x2F;rss&#x2F;techbiz.xml&#x27;
        },
        &#x27;techcrunch&#x27;: {
            id: &#x27;techcrunch&#x27;,
            title: &#x27;TechCrunch&#x27;,
            url: &#x27;feedproxy.google.com&#x2F;Techcrunch&#x27;
        },
        &#x27;smashing&#x27;: {
            id: &#x27;smashing&#x27;,
            title: &#x27;Smashing Magazine&#x27;,
            url: &#x27;www.smashingmagazine.com&#x2F;wp-rss.php&#x27;
        }
    };

    &#x2F;&#x2F;Simple method for stopping event propagation
    &#x2F;&#x2F;Using this so we can detach it later
    var stopper = function(e) {
        e.stopPropagation();
    };

    &#x2F;&#x2F;Get the order, placement and minned state of the modules and save them to a cookie
    var _setCookies = function() {
        var dds = Y.DD.DDM._drags;
        var list = {};
        &#x2F;&#x2F;Walk all the drag elements
        Y.each(dds, function(v, k) {
            var par = v.get(&#x27;node&#x27;).get(&#x27;parentNode&#x27;);
            &#x2F;&#x2F;Find all the lists with drag items in them
            if (par.test(&#x27;ul.list&#x27;)) {
                if (!list[par.get(&#x27;id&#x27;)]) {
                    list[par.get(&#x27;id&#x27;)] = [];
                }
            }
        });
        &#x2F;&#x2F;Walk the list
        Y.each(list, function(v, k) {
            &#x2F;&#x2F;Get all the li&#x27;s in the list
            var lis = Y.all(&#x27;#&#x27; + k + &#x27; li.item&#x27;);
            lis.each(function(v2, k2) {
                &#x2F;&#x2F;Get the drag instance for the list item
                var dd = Y.DD.DDM.getDrag(&#x27;#&#x27; + v2.get(&#x27;id&#x27;));
                &#x2F;&#x2F;Get the mod node
                var mod = dd.get(&#x27;node&#x27;).one(&#x27;div.mod&#x27;);
                &#x2F;&#x2F;Is it minimized
                var min = (mod.hasClass(&#x27;minned&#x27;)) ? true : false;
                &#x2F;&#x2F;Setup the cookie data
                list[k][list[k].length] = { id: dd.get(&#x27;data&#x27;).id, min: min };
            });
        });
        &#x2F;&#x2F;JSON encode the cookie data
        var cookie = Y.JSON.stringify(list);
        &#x2F;&#x2F;Set the sub-cookie
        Y.Cookie.setSub(&#x27;yui&#x27;, &#x27;portal&#x27;, cookie);
    };

    &#x2F;&#x2F;Helper method for creating the feed DD on the left
    var _createFeedDD = function(node, data) {
        &#x2F;&#x2F;Create the DD instance
        var dd = new Y.DD.Drag({
            node: node,
            data: data,
            bubbles: Y.Portal
        }).plug(Y.Plugin.DDProxy, {
            moveOnEnd: false,
            borderStyle: &#x27;none&#x27;
        });
        &#x2F;&#x2F;Setup some stopper events
        dd.on(&#x27;drag:start&#x27;, _handleStart);
        dd.on(&#x27;drag:end&#x27;, stopper);
        dd.on(&#x27;drag:drophit&#x27;, stopper);
    };

    &#x2F;&#x2F;Handle the node:click event
    var _nodeClick = function(e) {
        &#x2F;&#x2F;Is the target an href?
        if (e.target.test(&#x27;a&#x27;)) {
            var a = e.target, anim = null, div = a.get(&#x27;parentNode&#x27;).get(&#x27;parentNode&#x27;);
            &#x2F;&#x2F;Did they click on the min button
            if (a.hasClass(&#x27;min&#x27;)) {
                &#x2F;&#x2F;Get some node references
                var ul = div.one(&#x27;ul&#x27;),
                    h2 = div.one(&#x27;h2&#x27;),
                h = h2.get(&#x27;offsetHeight&#x27;),
                hUL = ul.get(&#x27;offsetHeight&#x27;),
                inner = div.one(&#x27;div.inner&#x27;);
                
                &#x2F;&#x2F;Create an anim instance on this node.
                anim = new Y.Anim({
                    node: inner
                });
                &#x2F;&#x2F;Is it expanded?
                if (!div.hasClass(&#x27;minned&#x27;)) {
                    &#x2F;&#x2F;Set the vars for collapsing it
                    anim.setAttrs({
                        to: {
                            height: 0
                        },
                        duration: &#x27;.25&#x27;,
                        easing: Y.Easing.easeOut,
                        iteration: 1
                    });
                    &#x2F;&#x2F;On the end, toggle the minned class
                    &#x2F;&#x2F;Then set the cookies for state
                    anim.on(&#x27;end&#x27;, function() {
                        div.toggleClass(&#x27;minned&#x27;);
                        _setCookies();
                    });
                } else {
                    &#x2F;&#x2F;Set the vars for expanding it
                    anim.setAttrs({
                        to: {
                            height: (hUL)
                        },
                        duration: &#x27;.25&#x27;,
                        easing: Y.Easing.easeOut,
                        iteration: 1
                    });
                    &#x2F;&#x2F;Toggle the minned class
                    &#x2F;&#x2F;Then set the cookies for state
                    div.toggleClass(&#x27;minned&#x27;);
                    _setCookies();
                }
                &#x2F;&#x2F;Run the animation
                anim.run();

            }
            &#x2F;&#x2F;Was close clicked?
            if (a.hasClass(&#x27;close&#x27;)) {
                &#x2F;&#x2F;Get some Node references..
                var li = div.get(&#x27;parentNode&#x27;),
                    id = li.get(&#x27;id&#x27;),
                    dd = Y.DD.DDM.getDrag(&#x27;#&#x27; + id),
                    data = dd.get(&#x27;data&#x27;),
                    item = Y.one(&#x27;#&#x27; + data.id);

                &#x2F;&#x2F;Destroy the DD instance.
                dd.destroy();
                &#x2F;&#x2F;Setup the animation for making it disappear
                anim = new Y.Anim({
                    node: div,
                    to: {
                        opacity: 0
                    },
                    duration: &#x27;.25&#x27;,
                    easing: Y.Easing.easeOut
                });
                anim.on(&#x27;end&#x27;, function() {
                    &#x2F;&#x2F;On end of the first anim, setup another to make it collapse
                    var anim = new Y.Anim({
                        node: div,
                        to: {
                            height: 0
                        },
                        duration: &#x27;.25&#x27;,
                        easing: Y.Easing.easeOut
                    });
                    anim.on(&#x27;end&#x27;, function() {
                        &#x2F;&#x2F;Remove it from the document
                        li.get(&#x27;parentNode&#x27;).removeChild(li);
                        item.removeClass(&#x27;disabled&#x27;);
                        &#x2F;&#x2F;Setup a drag instance on the feed list
                        _createFeedDD(item, data);
                        _setCookies();

                    });
                    &#x2F;&#x2F;Run the animation
                    anim.run();
                });
                &#x2F;&#x2F;Run the animation
                anim.run();
            }
            &#x2F;&#x2F;Stop the click
            e.halt();
        }
    };
    
    &#x2F;&#x2F;This creates the module, either from a drag event or from the cookie load
    var setupModDD = function(mod, data, dd) {
        var node = mod;
        &#x2F;&#x2F;Listen for the click so we can react to the buttons
        node.one(&#x27;h2&#x27;).on(&#x27;click&#x27;, _nodeClick);
        
        &#x2F;&#x2F;Remove the event&#x27;s on the original drag instance
        dd.detachAll(&#x27;drag:start&#x27;);
        dd.detachAll(&#x27;drag:end&#x27;);
        dd.detachAll(&#x27;drag:drophit&#x27;);
        
        &#x2F;&#x2F;It&#x27;s a target
        dd.set(&#x27;target&#x27;, true);
        &#x2F;&#x2F;Setup the handles
        dd.addHandle(&#x27;h2&#x27;).addInvalid(&#x27;a&#x27;);
        &#x2F;&#x2F;Remove the mouse listeners on this node
        dd._unprep();
        &#x2F;&#x2F;Update a new node
        dd.set(&#x27;node&#x27;, mod);
        &#x2F;&#x2F;Reset the mouse handlers
        dd._prep();
        

        Y.YQL(&#x27;select * from feed where url=&quot;http:&#x2F;&#x27;+&#x27;&#x2F;&#x27; + data.url + &#x27;&quot;&#x27;, (function(mod) {
            return function(r) {
                if (r &amp;&amp; r.query &amp;&amp; r.query.results) {
                    var inner = mod.one(&#x27;div.inner&#x27;),
                    html = &#x27;&#x27;;
                    
                    &#x2F;&#x2F;Walk the list and create the news list
                    Y.each(r.query.results, function(items) {
                        Y.each(items, function(v, k) {
                            if (k &lt; 5) {
                                if (v.title &amp;&amp; v.title.content) {
                                    v.title = v.title.content;
                                }
                                if (v.link &amp;&amp; (Y.Lang.isArray(v.link))) {
                                    v.link = v.link[0];
                                }
                                html += Y.Lang.sub(&#x27;&lt;li&gt;&lt;a href=&quot;{link}&quot; target=&quot;_blank&quot;&gt;{title}&lt;&#x2F;a&gt;&#x27;, v);
                            }
                        });
                    });
                    &#x2F;&#x2F;Set the innerHTML of the module
                    inner.set(&#x27;innerHTML&#x27;, &#x27;&lt;ul&gt;&#x27; + html + &#x27;&lt;&#x2F;ul&gt;&#x27;);
                    if (Y.DD.DDM.activeDrag) {
                        &#x2F;&#x2F;If we are still dragging, update the proxy element too..
                        var proxy_inner = Y.DD.DDM.activeDrag.get(&#x27;dragNode&#x27;).one(&#x27;div.inner&#x27;);
                        proxy_inner.set(&#x27;innerHTML&#x27;, &#x27;&lt;ul&gt;&#x27; + html + &#x27;&lt;&#x2F;ul&gt;&#x27;);
                        
                    }
                }
            }
        })(mod));

    };
    

    &#x2F;&#x2F;Helper method to create the markup for the module..
    var createMod = function(feed) {
        var str = &#x27;&lt;li class=&quot;item&quot;&gt;&#x27; +
                    &#x27;&lt;div class=&quot;mod&quot;&gt;&#x27; + 
                        &#x27;&lt;h2&gt;&lt;strong&gt;&#x27; + feed.title + &#x27;&lt;&#x2F;strong&gt; &lt;a title=&quot;minimize module&quot; class=&quot;min&quot; href=&quot;#&quot;&gt;-&lt;&#x2F;a&gt;&#x27; +
                        &#x27;&lt;a title=&quot;close module&quot; class=&quot;close&quot; href=&quot;#&quot;&gt;X&lt;&#x2F;a&gt;&lt;&#x2F;h2&gt;&#x27; +
                        &#x27;&lt;div class=&quot;inner&quot;&gt;&#x27; +
                        &#x27;    &lt;div class=&quot;loading&quot;&gt;Feed loading, please wait..&lt;&#x2F;div&gt;&#x27; + 
                        &#x27;&lt;&#x2F;div&gt;&#x27; +
                    &#x27;&lt;&#x2F;div&gt;&#x27; +
                &#x27;&lt;&#x2F;li&gt;&#x27;;
        return Y.Node.create(str);
    };
    
    &#x2F;&#x2F;Handle the start Drag event on the left side
    var _handleStart = function(e) {
        &#x2F;&#x2F;Stop the event
        stopper(e);
        &#x2F;&#x2F;Some private vars
        var drag = this,
            list3 = Y.one(&#x27;#list1&#x27;),
            mod = createMod(drag.get(&#x27;data&#x27;));
        
        &#x2F;&#x2F;Add it to the first list
        list3.appendChild(mod);
        &#x2F;&#x2F;Set the item on the left column disabled.
        drag.get(&#x27;node&#x27;).addClass(&#x27;disabled&#x27;);
        &#x2F;&#x2F;Set the node on the instance
        drag.set(&#x27;node&#x27;, mod);
        &#x2F;&#x2F;Add some styles to the proxy node.
        drag.get(&#x27;dragNode&#x27;).setStyles({
            opacity: &#x27;.5&#x27;,
            borderStyle: &#x27;none&#x27;,
            width: &#x27;320px&#x27;,
            height: &#x27;61px&#x27;
        });
        &#x2F;&#x2F;Update the innerHTML of the proxy with the innerHTML of the module
        drag.get(&#x27;dragNode&#x27;).set(&#x27;innerHTML&#x27;, drag.get(&#x27;node&#x27;).get(&#x27;innerHTML&#x27;));
        &#x2F;&#x2F;set the inner module to hidden
        drag.get(&#x27;node&#x27;).one(&#x27;div.mod&#x27;).setStyle(&#x27;visibility&#x27;, &#x27;hidden&#x27;);
        &#x2F;&#x2F;add a class for styling
        drag.get(&#x27;node&#x27;).addClass(&#x27;moving&#x27;);
        &#x2F;&#x2F;Setup the DD instance
        setupModDD(mod, drag.get(&#x27;data&#x27;), drag);

        &#x2F;&#x2F;Remove the listener
        this.detach(&#x27;drag:start&#x27;, _handleStart);
    };
    
    &#x2F;&#x2F;Walk through the feeds list and create the list on the left
    var feedList = Y.one(&#x27;#feeds ul&#x27;);
    Y.each(feeds, function(v, k) {
        var li = Y.Node.create(&#x27;&lt;li id=&quot;&#x27; + k + &#x27;&quot;&gt;&#x27; + v.title + &#x27;&lt;&#x2F;li&gt;&#x27;);
        feedList.appendChild(li);
        &#x2F;&#x2F;Create the DD instance for this item
        _createFeedDD(li, v);
    });

    &#x2F;&#x2F;This does the calculations for when and where to move a module
    var _moveMod = function(drag, drop) {
        if (drag.get(&#x27;node&#x27;).hasClass(&#x27;item&#x27;)) {
            var dragNode = drag.get(&#x27;node&#x27;),
                dropNode = drop.get(&#x27;node&#x27;),
                append = false,
                padding = 30,
                xy = drag.mouseXY,
                region = drop.region,
                middle1 = region.top + ((region.bottom - region.top) &#x2F; 2),
                middle2 = region.left + ((region.right - region.left) &#x2F; 2),
                dir = false,
                dir1 = false,
                dir2 = false;
                
                &#x2F;&#x2F;We could do something a little more fancy here, but we won&#x27;t ;)
                if ((xy[1] &lt; (region.top + padding))) {
                    dir1 = &#x27;top&#x27;;
                }
                if ((region.bottom - padding) &lt; xy[1]) {
                    dir1 = &#x27;bottom&#x27;;
                }
                if ((region.right - padding) &lt; xy[0]) {
                    dir2 = &#x27;right&#x27;;
                }
                if ((xy[0] &lt; (region.left + padding))) {
                    dir2 = &#x27;left&#x27;;
                }
                dir = dir2;
                if (dir2 === false) {
                    dir = dir1;
                }
                switch (dir) {
                    case &#x27;top&#x27;:
                        var next = dropNode.get(&#x27;nextSibling&#x27;);
                        if (next) {
                            dropNode = next;
                        } else {
                            append = true;
                        }
                        break;
                    case &#x27;bottom&#x27;:
                        break;
                    case &#x27;right&#x27;:
                    case &#x27;left&#x27;:
                        break;
                }
            

            if ((dropNode !== null) &amp;&amp; dir) {
                if (dropNode &amp;&amp; dropNode.get(&#x27;parentNode&#x27;)) {
                    if (!append) {
                        dropNode.get(&#x27;parentNode&#x27;).insertBefore(dragNode, dropNode);
                    } else {
                        dropNode.get(&#x27;parentNode&#x27;).appendChild(dragNode);
                    }
                }
            }
            &#x2F;&#x2F;Resync all the targets because something moved..
            Y.Lang.later(50, Y, function() {
                Y.DD.DDM.syncActiveShims(true);
            });
        }
    };

    &#x2F;*
    Handle the drop:enter event
    Now when we get a drop enter event, we check to see if the target is an LI, then we know it&#x27;s out module.
    Here is where we move the module around in the DOM.    
    *&#x2F;
    Y.Portal.on(&#x27;drop:enter&#x27;, function(e) {
        if (!e.drag || !e.drop || (e.drop !== e.target)) {
            return false;
        }
        if (e.drop.get(&#x27;node&#x27;).get(&#x27;tagName&#x27;).toLowerCase() === &#x27;li&#x27;) {
            if (e.drop.get(&#x27;node&#x27;).hasClass(&#x27;item&#x27;)) {
                _moveMod(e.drag, e.drop);
            }
        }
    });

    &#x2F;&#x2F;Handle the drag:drag event
    &#x2F;&#x2F;On drag we need to know if they are moved up or down so we can place the module in the proper DOM location.
    Y.Portal.on(&#x27;drag:drag&#x27;, function(e) {
        var y = e.target.mouseXY[1];
        if (y &lt; lastY) {
            goingUp = true;
        } else {
            goingUp = false;
        }
        lastY = y;
    });

    &#x2F;*
    Handle the drop:hit event
    Now that we have a drop on the target, we check to see if the drop was not on a LI.
    This means they dropped on the empty space of the UL.
    *&#x2F;
    Y.Portal.on(&#x27;drag:drophit&#x27;, function(e) {
        var drop = e.drop.get(&#x27;node&#x27;),
            drag = e.drag.get(&#x27;node&#x27;);

        if (drop.get(&#x27;tagName&#x27;).toLowerCase() !== &#x27;li&#x27;) {
            if (!drop.contains(drag)) {
                drop.appendChild(drag);
            }
        }
    });

    &#x2F;&#x2F;Handle the drag:start event
    &#x2F;&#x2F;Use some CSS here to make our dragging better looking.
    Y.Portal.on(&#x27;drag:start&#x27;, function(e) {
        var drag = e.target;
        if (drag.target) {
            drag.target.set(&#x27;locked&#x27;, true);
        }
        drag.get(&#x27;dragNode&#x27;).set(&#x27;innerHTML&#x27;, drag.get(&#x27;node&#x27;).get(&#x27;innerHTML&#x27;));
        drag.get(&#x27;dragNode&#x27;).setStyle(&#x27;opacity&#x27;,&#x27;.5&#x27;);
        drag.get(&#x27;node&#x27;).one(&#x27;div.mod&#x27;).setStyle(&#x27;visibility&#x27;, &#x27;hidden&#x27;);
        drag.get(&#x27;node&#x27;).addClass(&#x27;moving&#x27;);
    });

    &#x2F;&#x2F;Handle the drag:end event
    &#x2F;&#x2F;Replace some of the styles we changed on start drag.
    Y.Portal.on(&#x27;drag:end&#x27;, function(e) {
        var drag = e.target;
        if (drag.target) {
            drag.target.set(&#x27;locked&#x27;, false);
        }
        drag.get(&#x27;node&#x27;).setStyle(&#x27;visibility&#x27;, &#x27;&#x27;);
        drag.get(&#x27;node&#x27;).one(&#x27;div.mod&#x27;).setStyle(&#x27;visibility&#x27;, &#x27;&#x27;);
        drag.get(&#x27;node&#x27;).removeClass(&#x27;moving&#x27;);
        drag.get(&#x27;dragNode&#x27;).set(&#x27;innerHTML&#x27;, &#x27;&#x27;);
        _setCookies();
    });
    

    &#x2F;&#x2F;Handle going over a UL, for empty lists
    Y.Portal.on(&#x27;drop:over&#x27;, function(e) {
        var drop = e.drop.get(&#x27;node&#x27;),
            drag = e.drag.get(&#x27;node&#x27;);

        if (drop.get(&#x27;tagName&#x27;).toLowerCase() !== &#x27;li&#x27;) {
            if (!drop.contains(drag)) {
                drop.appendChild(drag);
                Y.Lang.later(50, Y, function() {
                    Y.DD.DDM.syncActiveShims(true);
                });
            }
        }
    });

    &#x2F;&#x2F;Create simple targets for the main lists..
    var uls = Y.all(&#x27;#play ul.list&#x27;);
    uls.each(function(v, k) {
        var tar = new Y.DD.Drop({
            node: v,
            padding: &#x27;20 0&#x27;,
            bubbles: Y.Portal
        });
    });
    
    
    &#x2F;&#x2F;Get the cookie data
    var cookie = Y.Cookie.getSub(&#x27;yui&#x27;, &#x27;portal&#x27;);
    if (cookie) {
        &#x2F;&#x2F;JSON parse the stored data
        var obj = Y.JSON.parse(cookie);

        &#x2F;&#x2F;Walk the data
        Y.each(obj, function(v, k) {
            &#x2F;&#x2F;Get the node for the list
            var list = Y.one(&#x27;#&#x27; + k);
            &#x2F;&#x2F;Walk the items in this list
            Y.each(v, function(v2, k2) {
                &#x2F;&#x2F;Get the drag for it
                var drag = Y.DD.DDM.getDrag(&#x27;#&#x27; + v2.id);
                &#x2F;&#x2F;Create the module
                var mod = createMod(drag.get(&#x27;data&#x27;));
                if (v2.min) {
                    &#x2F;&#x2F;If it&#x27;s minned add some CSS
                    mod.one(&#x27;div.mod&#x27;).addClass(&#x27;minned&#x27;);
                    mod.one(&#x27;div.inner&#x27;).setStyle(&#x27;height&#x27;, &#x27;0px&#x27;);
                }
                &#x2F;&#x2F;Add it to the list
                list.appendChild(mod);
                &#x2F;&#x2F;Set the drag listeners
                drag.get(&#x27;node&#x27;).addClass(&#x27;disabled&#x27;);
                drag.set(&#x27;node&#x27;, mod);
                drag.set(&#x27;dragNode&#x27;, Y.DD.DDM._proxy);
                drag.detachAll(&#x27;drag:start&#x27;);
                drag.detachAll(&#x27;drag:end&#x27;);
                drag.detachAll(&#x27;drag:drophit&#x27;);
                drag._unprep();
                &#x2F;&#x2F;Setup the new Drag listeners
                setupModDD(mod, drag.get(&#x27;data&#x27;), drag);
            });
        });
    }
});</pre>

</div>
        </div>

        <div id="sidebar" class="yui3-u">
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                                    <li data-description="A simple drag interaction that doesn&#x27;t require a drop interaction.">
                                        <a href="simple-drag.html">Simple Drag</a>
                                    </li>
                                
                            
                                
                                    <li data-description="How to apply the Drag Plugin to a node.">
                                        <a href="drag-plugin.html">Drag - Node plugin</a>
                                    </li>
                                
                            
                                
                                    <li data-description="A simple proxy drag interaction that doesn&#x27;t require a drop interaction.">
                                        <a href="proxy-drag.html">Drag - Proxy</a>
                                    </li>
                                
                            
                                
                                    <li data-description="How to constrain a draggable Node to another Node&#x27;s region.">
                                        <a href="constrained-drag.html">Drag - Constrained to a Region</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Using interaction groups, this example demonstrates how to tie into the Drag &amp; Drop Utility&#x27;s interesting moments to provide visual affordances for the current drag operation.">
                                        <a href="groups-drag.html">Drag - Interaction Groups</a>
                                    </li>
                                
                            
                                
                                    <li data-description="The use of the drag shim when dragging nodes over other troublesome nodes.">
                                        <a href="shim-drag.html">Using the Drag Shim</a>
                                    </li>
                                
                            
                                
                                    <li data-description="How to use the Drop Target events to code your application.">
                                        <a href="drop-code.html">Using Drop Based Coding</a>
                                    </li>
                                
                            
                                
                                    <li data-description="How you can use the DD Scroll plugin to scroll the browser window as you drag.">
                                        <a href="winscroll.html">Window Scrolling</a>
                                    </li>
                                
                            
                                
                                    <li data-description="How to use DD.Delegate to create a scalable solution which supports multiple draggable items.">
                                        <a href="delegate.html">Drag Delegation</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Using DD.Delegate to support dragging multiple items and dropping them onto a Drop Target.">
                                        <a href="delegate-drop.html">Drag Delegation with a Drop Target</a>
                                    </li>
                                
                            
                                
                                    <li data-description="How to use Drag plugins with a DD Delegate based solution.">
                                        <a href="delegate-plugins.html">Using Drag Plugins with Delegate</a>
                                    </li>
                                
                            
                                
                                    <li data-description="This example shows how to make a sortable list using Custom Event Bubbling.">
                                        <a href="list-drag.html">List Reorder w/Bubbling</a>
                                    </li>
                                
                            
                                
                                    <li data-description="This example shows how to make a sortable list using Custom Event Bubbling and Node Scrolling.">
                                        <a href="scroll-list.html">List Reorder w/Scrolling</a>
                                    </li>
                                
                            
                                
                                    <li data-description="How to make an animated node a Drop target.">
                                        <a href="anim-drop.html">Animated Drop Targets</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Example Photo Browser application.">
                                        <a href="photo-browser.html">Photo Browser</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Portal style example using Drag &amp; Drop Event Bubbling and Animation.">
                                        <a href="portal-drag.html">Portal Style Example</a>
                                    </li>
                                
                            
                                
                            
                                
                            
                        </ul>
                    </div>
                </div>
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples That Use This Component</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                                    <li data-description="Working with multiple YUI instances.">
                                        <a href="../yui/yui-multi.html">Multiple Instances</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Use StyleSheet to adjust the CSS rules applying a page theme from user input">
                                        <a href="../stylesheet/stylesheet-theme.html">Adjusting a Page Theme on the Fly</a>
                                    </li>
                                
                            
                        </ul>
                    </div>
                </div>
            
        </div>
    </div>
</div>

<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>

</body>
</html>
